【CSS】标签显示模式 ④ ( 标签显示模式示例

您所在的位置：网站首页 › win10 设置显示 › 【CSS】标签显示模式 ④ ( 标签显示模式示例

【CSS】标签显示模式 ④ ( 标签显示模式示例

2023-04-21 00:53| 来源: 网络整理| 查看: 265

文章目录

一、标签显示模式示例1、基本结构2、设置行内元素宽高3、设置元素背景4、设置文字水平居中5、取消链接文字下划线装饰6、设置鼠标经过样式二、文字垂直居中1、行高测量2、垂直居中设置3、文本行高与盒子高度关系三、完整代码示例代码示例显示效果一、标签显示模式示例

实现横向导航栏 , 要求如下 :

每个导航按钮都有指定的宽高 ,有默认背景 ,鼠标移动上去背景和文字都会改变 ,文字居中 ,文字没有链接下划线 ;1、基本结构

基本的 HTML 标签结构 , 就是 4 个链接 , 使用链接标签 ;

博客下载学习社区

显示样式如下 : 链接标签默认是行内元素 ;

2、设置行内元素宽高

链接标签默认是行内元素 , 行内元素的宽高就是其本身的宽高 , 为其设置宽高是无效的 ;

如果要为其设置宽高 , 必须将其设置为行内块元素 , 使用

display: inline-block;

CSS 样式 , 可以将行内元素或块级元素的显示样式转换为行内块元素 ;

使用 width 和 height 为其设置宽高 ;

width: 100px; height: 30px;

CSS 样式：

/* I. 设置默认的显示样式 */ a { /* 转为行内块样式 */ display: inline-block; width: 100px; height: 30px; }

显示样式 :

3、设置元素背景

为标签元素设置背景颜色 , 设置 background-color: gray; 样式即可 ;

/* I. 设置默认的显示样式 */ a { /* 转为行内块样式 */ display: inline-block; width: 100px; height: 30px; /* 设置背景颜色 */ background-color: gray; }

显示效果 :

4、设置文字水平居中

通过设置 text-align: center; CSS 样式 , 可以让标签中的文字水平居中 ;

/* I. 设置默认的显示样式 */ a { /* 转为行内块样式 */ display: inline-block; width: 100px; height: 30px; /* 设置背景颜色 */ background-color: pink; /* 文字水平居中 */ text-align: center; }

显示效果 :

5、取消链接文字下划线装饰

设置 text-decoration: none; CSS 样式 , 可以取消链接文字的下划线效果 ;

/* I. 设置默认的显示样式 */ a { /* 转为行内块样式 */ display: inline-block; width: 100px; height: 30px; /* 设置背景颜色 */ background-color: pink; /* 文字水平居中 */ text-align: center; /* 取消链接下划线 */ text-decoration: none; }

显示效果 :

6、设置鼠标经过样式

通过设置 a:hover 可以设置链接在鼠标经过的样式 ,

下面的样式用于设置鼠标经过时背景变成红色 , 字体颜色变成白色 ;

/* II. 鼠标经过样式 */ a:hover { background-color: orange; color: white; }

显示效果 : 鼠标经过下载链接时 , 显示的样式 ;

二、文字垂直居中

在 CSS 中没有文字垂直居中的设置 , 需要结合行高和元素高度进行设置 ;

1、行高测量

单行文字显示 , 存在四条线 :

顶线 : 文字上边界 ;中线 : 文字中间线 ;基线 : 英文中部分字母的下边界 , 如 a , b , c , d 等到基线就结束了 , 一些长字幕如 g , j 等需要延伸到底线 ;底线 : 文字下边界 ;

行高测量 : 基线与基线之间的距离就是行高 ;

中文行高测量 , 直接测量两行中文底部的距离 ;

2、垂直居中设置

内容高度 = 顶线到底线的高度

盒子的高度 = 内容高度 + 上边距 + 下边距

上边距与下边距是相等的 , 因此只要盒子的高度与文本高度相同 , 就可以做到文字内容垂直居中 ;

设置文本的行高等于盒子标签的高度 , 就可以实现文本的垂直居中 ;

设置行高 30 像素 line-height: 30px; , 设置高度 30 像素 height: 30px; , 就可以令文字垂直居中 ;

/* I. 设置默认的显示样式 */ a { /* 转为行内块样式 */ display: inline-block; width: 100px; height: 30px; /* 文字垂直居中行高与文本高度一致 */ line-height: 30px; }

设置前的样式 :

设置后的样式 :

3、文本行高与盒子高度关系

文本行高与盒子高度关系 :

文本行高 = 盒子高度 : 文本垂直居中 ;文本行高 > 盒子高度 : 文本偏下 ;文本行高 < 盒子高度 : 文本偏上 ;

之前的文本样式 :

文本偏上 , 说明文本行高小于盒子高度 ;

三、完整代码示例代码示例横向导航栏 /* I. 设置默认的显示样式 */ a { /* 转为行内块样式 */ display: inline-block; width: 100px; height: 30px; /* 设置背景颜色 */ background-color: pink; /* 文字水平居中 */ text-align: center; /* 取消链接下划线 */ text-decoration: none; /* 文字垂直居中行高与文本高度一致 */ line-height: 30px; } /* II. 鼠标经过样式 */ a:hover { background-color: red; color: white; } 博客下载学习社区显示效果

默认状态 :

鼠标移动到链接上的样式 :

点击按钮 , 在新窗口中打开页面 :

【本文地址】

公司简介

联系我们